﻿<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>条形图</title>
    <link href="~/Content/css/framework-theme.css" rel="stylesheet" />
    <script src="~/Content/js/jquery/jquery-2.1.1.min.js"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/maps/highmaps.js"></script>
    <script src="https://code.highcharts.com/maps/modules/map.js"></script>
    <script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
    <script src="https://code.highcharts.com/maps/modules/export-data.js"></script>
    <script src="https://code.highcharts.com/maps/modules/accessibility.js"></script>
    <script>
        $(function () {
            // 初始化空图表容器
            const chart = Highcharts.chart('container', {
                chart: {
                    type: 'column'
                },
                title: {
                    text: '重点病害数据报表'
                },
                xAxis: {
                    categories: [], // 初始为空
                    title: {
                        text: '病害分类'
                    },
                    crosshair: true
                },
                yAxis: {
                    title: {
                        text: '数量 (个)'
                    },
                    min: 0,
                    tickInterval: 10
                },
                tooltip: {
                    headerFormat: '<b>{point.key}</b><br/>',
                    pointFormat: '{series.name}: {point.y} 个',
                    shared: true
                },
                plotOptions: {
                    column: {
                        dataLabels: {
                            enabled: true,
                            color: '#333'
                        },
                        borderWidth: 0,
                        groupPadding: 0.1
                    }
                },
                legend: {
                    layout: 'horizontal',
                    align: 'center',
                    verticalAlign: 'bottom',
                    borderWidth: 0
                },
                series: [] // 初始无数据系列
            });

            // 发起AJAX请求
            $.ajax({
                url: '/SystemSecurity/BridgeMange/GetChartDataFromDatabase',
                type: 'GET',
                dataType: 'json',
                success: function (response) {
                    console.log('原始数据:', response);

                    // 验证数据格式
                    if (!Array.isArray(response)) {
                        $('#container').html('<div class="error">无效数据格式</div>');
                        return;
                    }

                    // 提取数据
                    const categories = response.map(item => item.CountType);
                    console.log("categories", categories);
                    const seriesData = response.map(item => item.Count2);
                    console.log("seriesData", seriesData);

                    // 更新图表
                    chart.xAxis[0].setCategories(categories, true);

                    // 清空原有系列并添加新系列
                    chart.series.forEach(s => s.remove());
                    chart.addSeries({
                        name: '病害数量',
                        data: seriesData,
                        color: '#7CB5EC'
                    }, true);
                },
                error: function (xhr, status, error) {
                    console.error('AJAX请求失败:', status, error);
                    $('#container').html('<div class="error">数据加载失败</div>');
                }
            });
        });

    </script>
</head>
<body>
    <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>